<!--结算管理-->
<template>
  <div class="page-container main">
    <div class="tool-container">
      <el-form class="tool-search" :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item prop="vendorId">
          <el-select v-model="queryParams.vendorId" clearable placeholder="商户名称" >
            <el-option v-for="item in vendors" :key="item.vendorId" :label="item.name" :value="item.vendorId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="settleType">
          <el-select v-model="queryParams.settleType" clearable placeholder="结算方式">
            <el-option v-for="item in dict.esettle_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="status">
          <el-select v-model="queryParams.status" clearable placeholder="状态">
            <el-option v-for="item in dict.settle_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="times"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY/MM/DD hh:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="tool-handle">
        <el-button type="primary" icon="Plus" @click="handleVendorSettlement()">手动结算</el-button>
      </div>
    </div>

    <div class="tabel-container myTable" v-loading="loading">
      <vxe-table ref="tableRef" :data="tableData">
        <vxe-table-column :resizable="true" type="seq" title="序号" width="80" sortable></vxe-table-column>
        <vxe-table-column :resizable="true" field="2" title="商户名称" sortable>
          <template #default="{ row }">
            {{getVendorName(row.vendorId)}}
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="settleType" title="结算方式" sortable>
          <template #default="{ row }">
            {{$common.marchType(row.settleType,dict.esettle_type)}}
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="timeFrom" title="结算周期" width="300" sortable>
          <template #default="{ row }"> {{row.timeFrom}} - {{row.timeTo}} </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="settleContents" title="结算内容" sortable>
          <template #default="{ row }">
            <dict-tag :options="dict.settle_contents" :value="row.settleContents" />
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="status" title="结算状态" sortable>
          <template #default="{ row }">
            <!-- {{$common.marchType(row.status,dict.settle_status)}} -->
            <dict-tag :options="dict.settle_status" :value="row.status" />
          </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="finishTime" title="结算日期" sortable> </vxe-table-column>

        <vxe-table-column :resizable="true" field="totalAmount" title="结算金额(元)" sortable>
          <template #default="{ row }"> {{row.totalAmount/100.0}} </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="vendorPayedAmount" title="累计结算(元)" sortable>
          <template #default="{ row }"> {{row.vendorPayedAmount/100.0}} </template>
        </vxe-table-column>
        <vxe-table-column :resizable="true" field="vendorAdvancePayedAmount" title="账户余额(元)" sortable>
          <template #default="{ row }"> {{row.vendorAdvancePayedAmount/100.0}} </template>
        </vxe-table-column>
        <vxe-column field="id" title="操作" width="250" fixed="right" show-overflow>
          <template #default="{ row }">
            <el-button link type="primary" @click="handleDetail(row)">详情</el-button>

            <el-button v-if="row.status == 2" link type="primary" @click="handleRedo(row)">重算</el-button>
            <el-button v-else link type="primary" disabled>重算</el-button>

            <el-button v-if="row.status == 2" link type="danger" @click="handleUndo(row)">作废</el-button>
            <el-button v-else link type="primary" disabled>作废</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <div class="myPager">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>

    <el-drawer :title="dom.rightComponent.title" v-model="dom.rightComponent.show" direction="rtl" class="demo-drawer" :close-on-click-modal="false">
      <component ref="rightComponent" :is="dom.rightComponent.companentName" :data="currentItem" @hideRight="getList()"></component>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue';
import { list, redo, undo } from '@/api/operation/vendorSettlement/index';
import { listVendor } from '@/api/vendor/index';

export default {
  components: {
    VendorSettlement: defineAsyncComponent(() => import('./vendorSettlement.vue'))
    // Send: defineAsyncComponent(() => import('./send/send.vue'))
  },
  computed: {
    times: {
      get() {
        return [this.queryParams.startFrom, this.queryParams.endTo];
      },
      set(value) {
        this.queryParams.startFrom = value[0];
        this.queryParams.endTo = value[1];
      }
    }
  },
  data() {
    return {
      loading: false,
      total: 0,
      vendors: [], //商户列表
      queryParams: {
        status: null,
        activityType: null,
        activityName: '',
        startFrom: null,
        endTo: null,
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'timeFrom',
        isAsc: 'desc'
      },
      tableData: [],
      // settleType: [
      //   { label: '自动', value: '1' },
      //   { label: '手动', value: '2' }
      // ],
      // status: [
      //   { label: '结算中', value: '1' },
      //   { label: '已结算', value: '2' },
      //   { label: '已转款', value: '3' },
      //   { label: '已完结', value: '4' },
      //   { label: '已作废', value: '5' }
      // ],
      // settleContents: [
      //   { label: '用氧', value: '1' },
      //   { label: '充灌', value: '2' },
      //   { label: '电费', value: '3' }
      // ],
      dict: {},
      currentItem: {},
      proxy: null,
      dom: {
        rightComponent: {
          show: false,
          title: '测试',
          companentName: ''
        }
      }
    };
  },
  mounted() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    this.proxy = proxy;
    this.dict = toRefs<any>(this.proxy?.useDict('esettle_type', 'settle_status', 'settle_contents'));

    let params = localStorage.getItem('vendorSettleMentQuery');
    if (params != null) {
      try {
        this.queryParams = JSON.parse(params);
      } catch (e) {}
    }

    this.init();
  },
  methods: {
    init() {
      this.getVendors();
      this.getList();
    },

    /**
     * 查询所有商户
     */
    getVendors() {
      listVendor({ name: '', pageNum: 1, pageSize: 2000000 }).then((res) => {
        let datas = res.rows;
        this.vendors = datas;
      });
    },

    /** 搜索重置操作 */
    resetQuery() {
      this.$refs.queryFormRef.resetFields();
      this.getList();
    },

    //查询列表
    getList() {
      this.dom.rightComponent.show = false;
      list(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },

    //查询
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    //获取酒店名称
    getVendorName(id) {
      let items = this.vendors;
      for (let i = 0; i < items.length; i++) {
        if (items[i].vendorId == id) return items[i].name;
      }

      return '';
    },

    //重算
    handleRedo(row) {
      this.loading = true;

      redo(row).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.getList();
        } else {
          ElMessage.error(res.msg);
        }
      });
    },

    /**
     * 作废
     */
    handleUndo(row) {
      this.loading = true;

      undo(row).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.getList();
        } else {
          ElMessage.error(res.msg);
        }
      });
    },

    //手动结算
    handleVendorSettlement() {
      this.dom.rightComponent.show = true;
      let row = {
        settleContents: this.settleContents,
        vendors: this.vendors,
        // vendorId: row.vendors[0].vendorId,
        settleContents: [],
        timeFrom: '',
        timeTo: ''
      };

      this.currentItem = row;
      this.dom.rightComponent.title = '手动结算';
      this.dom.rightComponent.companentName = 'VendorSettlement';
      this.$nextTick(() => {
        this.$refs.rightComponent.init();
      });
    },

    //详情
    handleDetail(row) {
      let params = this.queryParams;
      localStorage.setItem('vendorSettleMentQuery', JSON.stringify(params));

      this.proxy?.$tab.openPage('/operation/settlement/info', '结算详情', { id: row.settlementId });
    },
    /**
     * 匹配结果
     */
    marchType(value, types) {
      for (let i = 0; i < types.length; i++) {
        let type = types[i];
        if (type.value == value) return type.label;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;

  .myTable {
    width: 100%;
    height: calc(100% - 60px);
    overflow: auto;
  }
  .myPager {
    width: 100%;
    height: 50px;
    text-align: right;
  }
}
</style>

<style>
.el-drawer__header {
  margin-bottom: 5px !important;
  border-bottom: 1px solid var(--el-card-border-color, #e4e7ed);
  padding-bottom: 20px;
}

.el-drawer__body {
  padding: 10px !important;
}

.el-input-number__decrease,
.el-input-number__increase {
  display: none;
}

.el-input-number {
  width: 100%;
}

.el-select {
  min-width: 150px;
}
</style> 
